<template>
    <div>{{ title }}</div>
    <button @click="title='拾涯'">改变title</button>
</template>

<script setup>
import { ref, watch, reactive} from 'vue'
const title = ref('长江二桥')
const content = reactive(['曹操','曹昂',{曹植: '七步诗',曹操: ['观沧海', '短歌行'] }])

// watch监听数据的变化，从而执行一些副作用（DOM操作、axios请求
watch(title, (oldTitle, newTitle) => {
    console.log(oldTitle, newTitle)
})

setTimeout(() => {
    // 改第一层属性
    content.push('曹丕')
}, 2000)

setTimeout(() => {
    // 改第二层属性
    content[2].曹植 = '洛神赋'
}, 3000)

setTimeout(() => {
    // 改第三层属性
    content[2].曹操.push('神龟虽寿')
}, 4000)

watch(content, (newContent) => {
    console.log(newContent)
})

</script>